<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!-- https://element.eleme.cn/#/zh-CN/component/slider" -->
<div id="app2" style="font-size: 14px">
	<template>
		<div class="block">
			<span class="demonstration">默认</span>
			<el-slider v-model="value1"></el-slider>
		</div>
		<div class="block">
			<span class="demonstration">自定义初始值</span>
			<el-slider v-model="value2"></el-slider>
		</div>
		<div class="block">
			<span class="demonstration">隐藏 Tooltip</span>
			<el-slider v-model="value3" :show-tooltip="false"></el-slider>
		</div>
		<div class="block">
			<span class="demonstration">格式化 Tooltip</span>
			<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
		</div>
		<div class="block">
			<span class="demonstration">禁用</span>
			<el-slider v-model="value5" disabled></el-slider>
		</div>
	</template>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
	 	//初始值
	 	data() {
	 		return {
	 			value1: 0,
	 			value2: 50,
	 			value3: 36,
	 			value4: 48,
	 			value5: 42
	 		}
	 	},
	 	methods: {
	    	//格式化滑块调用的方法
	    	formatTooltip(val) {
	    		return val / 100;
	    	}
	    }
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app2');
</script>